<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第2课 抽象与建模</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .flowchart-step {
            transition: all 0.3s ease;
        }
        .flowchart-step.active {
            transform: scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* 代码语法高亮样式 */
        .code-keyword { color: #7c3aed; font-weight: bold; } /* 紫色 - 关键字 */
        .code-variable { color: #2563eb; } /* 蓝色 - 变量 */
        .code-string { color: #16a34a; } /* 绿色 - 字符串 */
        .code-function { color: #ea580c; } /* 橙色 - 函数 */
        .code-comment { color: #6b7280; font-style: italic; } /* 灰色 - 注释 */
        .code-operator { color: #000000; } /* 黑色 - 运算符 */
        .code-number { color: #dc2626; } /* 红色 - 数字 */

        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .tab-btn.tab-active {
            background-color: #3B82F6;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏占位符 -->
    <div class="h-20"></div>

    <!-- 导航栏 -->
    <nav id="mainNav" class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-700 shadow-2xl overflow-hidden transition-all duration-300">
        <!-- 装饰性背景图案 -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-10"></div>
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-white rounded-full opacity-10"></div>
            <div class="absolute -bottom-10 -left-10 w-24 h-24 bg-white rounded-full opacity-10"></div>
        </div>

        <div class="relative max-w-6xl mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <!-- 左侧：课程信息 -->
                <div class="flex items-center space-x-4">
                    <!-- 学科标识 -->
                    <div class="flex items-center space-x-3">
                        <div class="bg-white bg-opacity-20 backdrop-blur-sm text-white px-4 py-2 rounded-lg font-bold text-sm">
                            信息科技
                        </div>
                    </div>
                    <!-- 分隔线 -->
                    <div class="h-8 w-px bg-white bg-opacity-30"></div>
                    <!-- 课程标题 -->
                    <div>
                        <h1 class="text-2xl font-bold text-white mb-1">第2课 抽象与建模</h1>
                    </div>
                </div>

                <!-- 中间：标签栏 -->
                <div class="flex-1 flex justify-center mx-8">
                    <nav class="flex rounded-xl overflow-hidden shadow divide-x divide-blue-100 bg-white bg-opacity-20 backdrop-blur-sm text-white font-medium text-base border border-white border-opacity-30" id="tabBar">
                        <button class="px-6 py-2 focus:outline-none tab-btn tab-active bg-white bg-opacity-30 text-blue-800" data-tab="tab1">学习内容</button>
                        <button class="px-6 py-2 focus:outline-none tab-btn" data-tab="tab2">练习</button>
                    </nav>
                </div>

                <!-- 右侧：年级信息 -->
                <div class="flex items-center space-x-3">
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm px-4 py-2 rounded-lg">
                        <span class="text-white font-semibold text-sm">六年级上册</span>
                    </div>

                    <!-- 进度指示器 -->
                    <div class="hidden md:flex items-center space-x-2">
                        <div class="text-blue-100 text-sm">本课学习进度</div>
                        <div class="w-16 h-2 bg-white bg-opacity-20 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-green-400 to-blue-400 rounded-full transition-all duration-300 ease-out" style="width: 50%"></div>
                        </div>
                        <div class="text-white text-sm font-medium">50%</div>
                    </div>
                </div>
            </div>

            <!-- 底部装饰线 -->
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-30"></div>
        </div>
    </nav>

    <!-- Tab1: 学习内容 -->
    <div id="tab1" class="tab-content active">
    <!-- 主要内容区域 -->
    <div class="max-w-6xl mx-auto px-4 py-8">
        <!-- 学习目标 -->
        <section class="mb-12 bg-gradient-to-br from-blue-100 to-indigo-50 rounded-xl shadow-md p-6 border border-blue-100">
            <h2 class="text-2xl font-bold text-blue-800 mb-4 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                你将学习
            </h2>
            <p class="text-lg text-gray-700 mb-4">如何将实际问题抽象为数学模型，并用算法解决问题。</p>
        </section>

        <!-- 鸡兔同笼互动游戏 -->
        <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
            <div class="bg-blue-600 text-white p-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    鸡兔同笼问题模拟实验
                </h2>
                <p class="mt-2">体验抽象与建模解决问题的过程：今有鸡、兔同笼，上有三十五头，下有九十四足，问鸡、兔各几何？</p>
            </div>

            <div class="p-6">
                <!-- 上半部分：问题抽象 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <!-- 左侧：关键要素 -->
                    <div class="bg-blue-50 p-6 rounded-lg border border-blue-200">
                        <h3 class="text-xl font-semibold mb-4 text-blue-800">1.问题抽象</h3>
                        <div>
                            <h4 class="font-medium text-blue-700 mb-3">关键要素：</h4>
                            <ul class="list-disc pl-5 space-y-2 text-gray-700">
                                <li>鸡和兔的总头数：35</li>
                                <li>鸡和兔的总脚数：94</li>
                                <li>每只鸡有2只脚</li>
                                <li>每只兔有4只脚</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 右侧：抽象表格 -->
                    <div class="bg-green-50 p-6 rounded-lg border border-green-200">
                        <h3 class="text-xl font-semibold mb-4 text-green-800">抽象表格</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full border border-gray-300 bg-white rounded">
                                <thead>
                                    <tr class="bg-gray-200">
                                        <th class="border border-gray-300 px-4 py-2 text-center">对象</th>
                                        <th class="border border-gray-300 px-4 py-2 text-center">头数</th>
                                        <th class="border border-gray-300 px-4 py-2 text-center">脚数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-300 px-4 py-2 text-center">鸡</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center">未知</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center">未知</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-300 px-4 py-2 text-center">兔</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center">未知</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center">未知</td>
                                    </tr>
                                    <tr class="bg-blue-100">
                                        <td class="border border-gray-300 px-4 py-2 text-center font-semibold">整体</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center font-semibold">35</td>
                                        <td class="border border-gray-300 px-4 py-2 text-center font-semibold">94</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 下半部分：建模求解 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- 左侧：数学模型和参数设置 -->
                    <div class="bg-purple-50 p-6 rounded-lg border border-purple-200">
                        <h3 class="text-xl font-semibold mb-4 text-purple-800">2.建立模型</h3>
                        <div class="space-y-6">
                            <!-- 数学模型 -->
                            <div>
                                <h4 class="font-medium text-purple-700 mb-3">数学模型：</h4>
                                <div class="bg-white p-4 rounded border">
                                    <p class="mb-2">设鸡的数量为 <span class="font-mono text-blue-600">ji</span>，兔的数量为 <span class="font-mono text-blue-600">tu</span></p>
                                    <p class="mb-2">方程组：</p>
                                    <div class="flex items-center mt-1 p-2 bg-gray-50 rounded">
                                        <span class="mr-2 font-mono">ji + tu = 35</span>
                                    </div>
                                    <div class="flex items-center mt-1 p-2 bg-gray-50 rounded">
                                        <span class="mr-2 font-mono">2 × ji + 4 × tu = 94</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 参数设置 -->
                            <div>
                                <h4 class="font-medium text-purple-700 mb-3">参数设置：</h4>
                                <div class="bg-white p-4 rounded border">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                        <div>
                                            <label class="block mb-1 text-sm font-medium">总头数</label>
                                            <input type="number" id="total-heads" value="35" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        </div>
                                        <div>
                                            <label class="block mb-1 text-sm font-medium">总脚数</label>
                                            <input type="number" id="total-feet" value="94" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        </div>
                                    </div>
                                    <button onclick="solveProblem()" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition font-medium">求解</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：求解结果 -->
                    <div class="bg-orange-50 p-6 rounded-lg border border-orange-200">
                        <h3 class="text-xl font-semibold mb-4 text-orange-800">3.求解过程</h3>
                        <div class="space-y-4">
                            <!-- 求解结果区域 -->
                            <div id="solution-result" class="hidden">
                                <h4 class="font-medium text-orange-700 mb-3">求解结果：</h4>
                                <div class="bg-white p-8 rounded border min-h-96">
                                    <div id="solution-text" class="mb-6"></div>
                                    <div id="solution-steps" class="max-h-96 overflow-y-auto"></div>
                                </div>
                            </div>

                            <!-- 初始状态提示 -->
                            <div id="initial-state" class="bg-white p-4 rounded border">
                                <p class="text-gray-600 text-center">请在左侧设置参数并点击"求解"按钮</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 核心概念 -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">核心概念</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 问题分析 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-blue-100 p-4">
                        <h3 class="font-semibold text-blue-600 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            问题分析
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            解决问题首先要对问题进行分析，抽象出关键要素。在鸡兔同笼问题中，关键要素包括：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>鸡和兔的总头数</li>
                            <li>鸡和兔的总脚数</li>
                            <li>每只鸡有2只脚</li>
                            <li>每只兔有4只脚</li>
                        </ul>
                    </div>
                </div>

                <!-- 抽象与建模 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-green-100 p-4">
                        <h3 class="font-semibold text-green-700 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                            </svg>
                            抽象与建模
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            在抽象的基础上，建立数学模型：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>用变量ji表示鸡的数量</li>
                            <li>用变量tu表示兔的数量</li>
                            <li>建立方程组模型</li>
                        </ul>
                        <div class="mt-3 p-2 bg-gray-100 rounded text-xs font-mono">
                            ji + tu = 35<br>
                            2 × ji + 4 × tu = 94
                        </div>
                    </div>
                </div>

                <!-- 算法设计 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-purple-100 p-4">
                        <h3 class="font-semibold text-purple-700 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                            </svg>
                            算法设计
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            设计算法求解方程组：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>输入：总头数和总脚数</li>
                            <li>输出：鸡和兔的数量</li>
                            <li>算法：枚举法求解</li>
                        </ul>
                        <div class="mt-3 text-sm text-gray-500">
                            通过枚举所有可能的组合来找到正确答案
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 总结 -->
        <section class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-green-600 text-white rounded-2xl shadow-2xl overflow-hidden">
            <!-- 装饰性背景图案 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"></div>
                <div class="absolute top-32 right-16 w-16 h-16 bg-white rounded-full"></div>
                <div class="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"></div>
                <div class="absolute bottom-10 right-10 w-24 h-24 bg-white rounded-full"></div>
            </div>

            <div class="relative p-8">
                <!-- 标题区域 -->
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full mb-4">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h2 class="text-3xl font-bold mb-2">学习总结</h2>
                    <p class="text-blue-100 text-lg">通过本课学习，我们了解了抽象与建模的重要性</p>
                </div>

                <!-- 步骤卡片网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">1</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-blue-100">问题分析</h3>
                        <p class="text-blue-200 leading-relaxed">明确问题要素和需求</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">2</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-purple-100">抽象要素</h3>
                        <p class="text-purple-200 leading-relaxed">提取关键变量和关系</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">3</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-green-100">建立模型</h3>
                        <p class="text-green-200 leading-relaxed">用数学语言描述问题</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">4</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-pink-100">算法求解</h3>
                        <p class="text-pink-200 leading-relaxed">设计算法解决问题</p>
                    </div>
                </div>

                <!-- 关键概念卡片 -->
                <div class="bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20">
                    <div class="flex items-center mb-4">
                        <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mr-3">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-yellow-200">关键概念</h3>
                    </div>
                    <p class="text-lg leading-relaxed text-white">
                        <span class="font-semibold text-lime-500 drop-shadow-lg">抽象</span>是从具体问题中提取关键要素，
                        <span class="font-semibold text-lime-500 drop-shadow-lg">建模</span>是用数学语言描述问题要素之间的关系。
                    </p>
                    <div class="mt-4 flex items-center text-yellow-200">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <span class="text-sm font-medium">掌握这些核心概念，将帮助你更好地解决实际问题！</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
    </div> <!-- 结束tab1-->

    <!-- Tab2: 练习 -->
    <div id="tab2" class="tab-content hidden">
    <!-- 练习内容区域 -->
    <div class="max-w-6xl mx-auto px-4 py-8">
        <!-- 练习标题 -->
        <section class="mb-12 bg-gradient-to-br from-green-100 to-blue-50 rounded-xl shadow-md p-6 border border-green-100">
            <h2 class="text-2xl font-bold text-green-800 mb-4 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                练习内容
            </h2>
            <p class="text-lg text-gray-700 mb-4">通过练习巩固所学知识，动手实践体验抽象与建模。</p>
        </section>

        <!-- 练习1：问题建模 -->
        <section class="mb-12 bg-cyan-100 rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">练习1：问题建模</h2>
            <p class="text-gray-700 mb-6">请将以下实际问题抽象为数学模型。</p>

            <div class="bg-blue-100 p-4 rounded-lg mb-6">
                <h3 class="font-semibold text-blue-800 mb-2">问题描述：</h3>
                <p class="text-blue-700 mb-3">某商店出售A、B两种商品，价格分别为：A商品5元/个，B商品3元/个。现在小明有50元钱，想买100个商品。请建立数学模型求解A、B各买多少个？</p>
                <h3 class="font-semibold text-blue-800 mb-2">思考要点：</h3>
                <ul class="list-disc pl-6 space-y-1 text-blue-700">
                    <li>如何定义变量来表示A、B商品的数量？</li>
                    <li>总钱数和总数量的约束条件如何用数学式表达？</li>
                    <li>如何建立数学模型来描述这个问题？</li>
                </ul>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="font-semibold text-gray-800 mb-2">请写出你的建模方案：</h3>
                <textarea id="exercise1" rows="12" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none">1. 问题分析：
   - 关键要素：两种商品A、B，价格分别为5元/个、3元/个
   - 约束条件：总钱数50元，总数量100个

2. 变量定义：
   - 设A商品买x个，B商品买y个
   - x、y的取值范围如何？

3. 数学模型：
   - ？
   - ？</textarea>
                <button id="submitExercise1" class="mt-4 bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                    提交答案
                </button>
            </div>
        </section>

        <!-- 练习2：百钱买百鸡问题 -->
        <section class="mb-12 bg-orange-100 rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">练习2：百钱买百鸡问题建模</h2>
            <p class="text-gray-700 mb-6">鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买百鸡，问翁、母、雏各几何？</p>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 左侧：建模要求和参数设置 -->
                <div class="space-y-6">
                    <!-- 建模要求 -->
                    <div class="bg-purple-100 p-6 rounded-lg border border-purple-200">
                        <h3 class="text-xl font-semibold mb-4 text-purple-800">建模要求</h3>
                        <ul class="list-disc pl-6 space-y-2 text-purple-700">
                            <li>分析问题中的关键要素</li>
                            <li>建立数学模型（方程组）</li>
                            <li>设计求解算法</li>
                        </ul>
                    </div>

                    <!-- 参数设置 -->
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800">参数设置</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block mb-2 text-sm font-medium">总钱数</label>
                                <input type="number" id="total-money" value="100" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label class="block mb-2 text-sm font-medium">总鸡数</label>
                                <input type="number" id="total-chickens" value="100" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <button onclick="solveChickenProblem()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg transition font-medium">
                                求解
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧：建模方案 -->
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">请写出你的建模方案：</h3>
                    <textarea id="modeling-approach" rows="13" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none">1. 问题分析：
   - 关键要素：鸡翁、鸡母、鸡雏三种，价格分别为5元/只、3元/只、1元/3只
   - 约束条件：？

2. 变量定义：
   - 设鸡翁买x只，鸡母买y只，鸡雏买z只
   - x、y、z的取值范围如何？

3. 数学模型：
   - ？
   - ？</textarea>
                    <button id="submitExercise2" class="mt-4 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                        提交答案
                    </button>
                </div>
            </div>

            <div id="chicken-solution" class="mt-6 p-4 bg-green-50 rounded-lg hidden">
                <h3 class="font-semibold text-green-800 mb-2">求解结果：</h3>
                <div id="chicken-result"></div>
            </div>
        </section>

        <!-- 练习3：问题优化分析 -->
        <section class="mb-12 bg-purple-100 rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">【提升题】练习3：问题优化分析</h2>
            <p class="text-gray-700 mb-6">练习1中想买100个商品是无解的，思考换到多少个商品是合适的，简单写出你的理由或思考过程。</p>

            <div class="bg-indigo-100 p-4 rounded-lg mb-6">
                <h3 class="font-semibold text-indigo-800 mb-2">问题回顾：</h3>
                <p class="text-indigo-700 mb-3">在练习1中，小明有50元钱，A商品5元/个，B商品3元/个，想买100个商品，但这个问题无解。</p>
                <h3 class="font-semibold text-indigo-800 mb-2">思考要点：</h3>
                <ul class="list-disc pl-6 space-y-1 text-indigo-700">
                    <li>为什么100个商品是无解的？</li>
                    <li>什么情况下这个问题有解？</li>
                    <li>如何找到合适的商品数量？</li>
                    <li>可以用哪些方法来分析和解决？</li>
                </ul>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="font-semibold text-gray-800 mb-2">请写出你的分析和思考过程：</h3>
                <textarea id="exercise3" rows="11" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none">
1. 为什么无解？
   - ？

2. 合适的商品数量范围：
   - 设总数量为n个
   - 最少花费：全部买B商品，花费=？元
   - 最多花费：全部买A商品，花费=？元
   - 
   - 
   - 所以合适的商品数量范围是：？
</textarea>
                <button id="submitExercise3" class="mt-4 bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                    提交答案
                </button>
            </div>
        </section>
    </div>
    </div> <!-- 结束tab2-->

    <script>
        // 标签栏切换逻辑
        function initTabs() {
            document.querySelectorAll('.tab-btn').forEach(function(btn){
                btn.addEventListener('click', function(){
                    // 移除所有按钮的激活状态
                    document.querySelectorAll('.tab-btn').forEach(b=>{
                        b.classList.remove('tab-active');
                        b.classList.remove('bg-blue-600');
                        b.classList.remove('text-white');
                    });

                    // 激活当前按钮
                    this.classList.add('tab-active');
                    this.classList.add('bg-blue-600');
                    this.classList.add('text-white');

                    // 移除所有内容区域的active类
                    document.querySelectorAll('.tab-content').forEach(c=>{
                        c.classList.remove('active');
                    });

                    // 为对应内容添加active类
                    let tab = this.getAttribute('data-tab');
                    const tabContent = document.getElementById(tab);
                    if (tabContent) {
                        tabContent.classList.add('active');
                    }
                });
            });

            // 默认激活第一个tab
            const firstTab = document.querySelector('.tab-btn[data-tab="tab1"]');
            if (firstTab) {
                firstTab.classList.add('tab-active', 'bg-blue-600', 'text-white');
            }

            const firstContent = document.getElementById('tab1');
            if (firstContent) {
                firstContent.classList.add('active');
            }

            // 确保第二个tab内容默认没有active类
            const secondContent = document.getElementById('tab2');
            if (secondContent) {
                secondContent.classList.remove('active');
            }
        }

        // 鸡兔同笼问题求解函数
        function solveProblem() {
            const totalHeads = parseInt(document.getElementById('total-heads').value);
            const totalFeet = parseInt(document.getElementById('total-feet').value);

            const resultDiv = document.getElementById('solution-result');
            const initialState = document.getElementById('initial-state');
            const solutionText = document.getElementById('solution-text');
            const solutionSteps = document.getElementById('solution-steps');

            // 清空之前的结果
            solutionSteps.innerHTML = '';

            // 验证输入
            if (isNaN(totalHeads) || isNaN(totalFeet) || totalHeads <= 0 || totalFeet <= 0) {
                solutionText.textContent = '请输入有效的头数和脚数！';
                resultDiv.classList.remove('hidden');
                initialState.classList.add('hidden');
                return;
            }

            let found = false;
            let stepsHTML = '<p class="font-medium mt-3">枚举过程：</p><div class="max-h-40 overflow-y-auto mt-2">';

            // 枚举法求解
            for (let ji = 0; ji <= totalHeads; ji++) {
                const tu = totalHeads - ji;
                const feet = ji * 2 + tu * 4;

                // 记录每一步，添加浅色背景
                const bgColor = feet === totalFeet ? 'bg-green-100 border-green-300' : 'bg-blue-50 border-blue-200';
                stepsHTML += `<div class="p-3 border-b ${bgColor} rounded mb-1">
                    <p class="text-sm">尝试：鸡=${ji}只，兔=${tu}只 → 脚数=${ji*2} + ${tu*4} = ${feet}</p>
                </div>`;

                if (feet === totalFeet) {
                    solutionText.innerHTML = `求解结果：<br>
                        鸡的数量 = <span class="font-bold text-green-600">${ji}</span> 只<br>
                        兔的数量 = <span class="font-bold text-green-600">${tu}</span> 只`;
                    found = true;
                    break;
                }
            }

            stepsHTML += '</div>';

            if (!found) {
                solutionText.textContent = '无解！请检查输入的头数和脚数是否合理。';
            }

            solutionSteps.innerHTML = stepsHTML;
            resultDiv.classList.remove('hidden');
            initialState.classList.add('hidden');
        }

        // 百钱买百鸡问题求解函数
        function solveChickenProblem() {
            const totalMoney = parseInt(document.getElementById('total-money').value);
            const totalChickens = parseInt(document.getElementById('total-chickens').value);

            const solutionDiv = document.getElementById('chicken-solution');
            const resultDiv = document.getElementById('chicken-result');

            // 清空之前的结果
            resultDiv.innerHTML = '';

            // 验证输入
            if (isNaN(totalMoney) || isNaN(totalChickens) || totalMoney <= 0 || totalChickens <= 0) {
                resultDiv.innerHTML = '<p class="text-red-600">请输入有效的钱数和鸡数！</p>';
                solutionDiv.classList.remove('hidden');
                return;
            }

            let solutions = [];

            // 枚举法求解
            for (let cock = 0; cock <= totalMoney / 5; cock++) {
                for (let hen = 0; hen <= (totalMoney - 5 * cock) / 3; hen++) {
                    const chick = totalChickens - cock - hen;
                    if (chick >= 0 && chick % 3 === 0 && (5 * cock + 3 * hen + chick / 3) === totalMoney) {
                        solutions.push({cock, hen, chick});
                    }
                }
            }

            if (solutions.length > 0) {
                resultDiv.innerHTML = '<p class="font-medium text-green-700 mb-2">找到以下解：</p>';
                solutions.forEach((sol, index) => {
                    resultDiv.innerHTML += `
                        <div class="mb-2 p-2 bg-white rounded border">
                            解${index + 1}：鸡翁 ${sol.cock} 只，鸡母 ${sol.hen} 只，鸡雏 ${sol.chick} 只
                        </div>
                    `;
                });
            } else {
                resultDiv.innerHTML = '<p class="text-red-600">无解！请检查输入的钱数和鸡数是否合理。</p>';
            }

            solutionDiv.classList.remove('hidden');
        }

        // 练习提交按钮事件监听
        document.getElementById('submitExercise1').addEventListener('click', function() {
            const answer = document.getElementById('exercise1').value.trim();
            if (answer.length > 0) {
                alert('答案已提交！');
                this.disabled = true;
                this.textContent = '已提交';
                this.classList.remove('bg-green-600', 'hover:bg-green-700');
                this.classList.add('bg-gray-500', 'cursor-not-allowed');
            } else {
                alert('请先输入您的答案再提交！');
            }
        });

        // 练习2提交按钮事件监听
        document.getElementById('submitExercise2').addEventListener('click', function() {
            const answer = document.getElementById('modeling-approach').value.trim();
            if (answer.length > 0) {
                alert('答案已提交！');
                this.disabled = true;
                this.textContent = '已提交';
                this.classList.remove('bg-purple-600', 'hover:bg-purple-700');
                this.classList.add('bg-gray-500', 'cursor-not-allowed');
            } else {
                alert('请先输入您的答案再提交！');
            }
        });

        // 练习3提交按钮事件监听
        document.getElementById('submitExercise3').addEventListener('click', function() {
            const answer = document.getElementById('exercise3').value.trim();
            if (answer.length > 0) {
                alert('答案已提交！');
                this.disabled = true;
                this.textContent = '已提交';
                this.classList.remove('bg-purple-600', 'hover:bg-purple-700');
                this.classList.add('bg-gray-500', 'cursor-not-allowed');
            } else {
                alert('请先输入您的答案再提交！');
            }
        });

        // 页面滚动进度跟踪
        function updateScrollProgress() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.body.offsetHeight,
                document.documentElement.clientHeight,
                document.documentElement.scrollHeight,
                document.documentElement.offsetHeight
            );

            // 计算滚动进度（从0到100）
            const scrollProgress = Math.min(100, Math.max(0,
                ((scrollTop + windowHeight) / documentHeight) * 100
            ));

            // 更新进度条宽度
            const progressBar = document.querySelector('#mainNav .bg-gradient-to-r');
            if (progressBar) {
                progressBar.style.width = `${scrollProgress}%`;
            }

            // 更新百分比文本
            const progressText = document.querySelector('#mainNav .text-white.text-sm.font-medium');
            if (progressText) {
                progressText.textContent = `${Math.round(scrollProgress)}%`;
            }
        }

        // 添加滚动事件监听器
        window.addEventListener('scroll', updateScrollProgress);

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            initTabs(); // 初始化标签页
            updateScrollProgress();
        });
    </script>
</body>
</html>
